<template>
  	<div class="header">
		<div class="container">
			<div class="logo" @click="scrollTop">
				<img src="./images/logo.png" alt="banana">
			</div>
			<div class="btn" @click="showMenu">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</div>
			<div class="navbar" :class="{'auto':height}">
				<ul>
					<li class="nav" @click="jump(index)" v-for="(item,index) in menu" :key="index" :class="index==curIndex?'current':''">{{item}}</li>
				</ul>
			</div>
		</div>
  	</div>
</template>

<script>
export default {
	name: 'Header',
	data () {
		return {
			curIndex: -1,
			scroll: '',
			height: false,
			menu: ['关于我们','产品化方向','科研合作','人才招募']
		}
	},
	mounted(){
		window.addEventListener('scroll', this.handleScroll)
	},
	methods:{
		showMenu(){
			this.height = !this.height
		},
		jump(index){
			this.curIndex = index
			let jump = document.getElementsByClassName('section')
			let total = jump[index].offsetTop
			$('body,html').animate({scrollTop:total},1000)
		},
		handleScroll(){
			this.scroll = document.documentElement.scrollTop || document.body.scrollTop
			this.loadSroll()
		},
		loadSroll(){
			var self = this;
			var $navs = $(".nav");
			var sections = document.getElementsByClassName('section');
			for (var i = sections.length - 1; i >= 0; i--) {
				if (self.scroll + 100 >= sections[i].offsetTop) {
					$navs.eq(i).addClass("current").siblings().removeClass("current")
					break
				}
			}
		},
		scrollTop() {
			$('body,html').animate({scrollTop:0},1000)
		}
	}
}
</script>

<style lang="less" scoped>
.header{
	position: fixed;
	top:0;
	left:0;
	right:0;
	z-index: 999;
	height:70px;
	line-height: 70px;
	background: #040000;
	.container{
		height:100%;
		display:flex;
		flex-flow:row nowrap;
  		justify-content: space-between;
		.logo{
			width:100px;
			height:100%;
			margin-left:15px;
			cursor: pointer;
			position: relative;
			img{
				width:100px;
				position: absolute;
				top:50%;
				transform: translateY(-50%);
			}
		}
		.btn{
			display: none;
			position: relative;
			padding: 6px 10px 9px 10px;
			margin-top: 17px;
			margin-right: 15px;
			margin-bottom: 17px;
			background-color: transparent;
			border: 1px solid rgba(255,255,255,.3);
			border-radius: 4px;
			.icon-bar{
				display: block;
				margin-top: 4px;
				width: 22px;
				height: 2px;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 1px; 
			}
		}
		.navbar{
			overflow: hidden;
			transition: all .5s;
			border-top:1px solid transparent;
			&.auto{
				height: 161px !important;
			}
			ul{
				display:flex;
				justify-content: flex-end;
				flex-direction: row;
				li{
					padding:0 20px;
					cursor: pointer;
					color: #666666;
					transition: all .5s;
					&.current{
						transform: scale(1.1);
						color: #FFFFFF;
					}
					&:hover{
						transform: scale(1.1);
						color: #FFFFFF;
					}
				}
			}
		}
	}
}
</style>
